.animate {
	 
	width: 100%;
      /* animation: imgbg 8s linear infinite; */
	position: relative;
	height:800px;
}

 #codediv{
	 width: 100%;  position: absolute; top: 70%;
 }

#codekey { 
	 
	height: 280px;
	padding: 16px;
	background-color: #fff;
}
#codekey .codekeyitem{
	width: 30%;
	height: 210px;
	float: left;
}
#codecon{
	 
	padding: 20px;
}
.fa-star {
	position: absolute;
	color: rgba(246, 247, 148, 1.0);

/* animation: starmoon 8s linear infinite; */
}

.fa-cloud {
	position: absolute;
	color: rgba(255, 255, 255, 1.0);
}

	
#backgroung_position ,#backgroung-size_percentage,#backgroung-size_px{
	border: 1px #e4e4e4 solid;
	width: 40px;
	height: 40px;
	margin-top: 20px;
	margin-right: 10px;
}

#sprite,#sprite1,#sprite2,#sprite3{
	background: url(../images/Group%201.png) no-repeat ;
	background-size: 35%;
	background-position-x: -0px;
	height: 70px;
	position:relative;
	left: 25px;
	top: 40px;
	
}
#shade,#shade1,#shade2,#shade3{
	width: 45%;
	height: 50px;
	background-color: rgba(0,0,255,0.7);
	border: #0000FF;
	position: absolute;
	right:25px;
}
#shade{
	top: 25px;
}
#shade1{
	top: 100px;
}
#shade2{
	top: 175px;
}
#shade3{
	top: 250px;
	
}
.backgroung-size{
	margin-top: 20px;
}
.border_con{
	width: 50%;
	height: 300px;
/* 	border: 1px #f00 solid; */
	margin: auto;
	margin-top: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
.border_con div{
	width: 100%;
	height: 70px;
	border: 1px #000 solid;
	margin-top: 10px;
	
}
.shade_all{
	width:25%;
	height: 290px;
	background-color: #fff;
	position: relative;
	top: -290px;
	z-index: 9;
}
